<template>
  <div class="mg-lg">
    <el-form
      v-loading="loading"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules || {}"
      label-width="auto"
      status-icon
    >
      <c-main-template title="车辆信息" minHeight="auto" v-if="carDetails">
        <div class="mt-lg">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="车辆信息：">
                <span v-for="(item, index) in k" :key="index">
                  {{ carDetails[item] }} &nbsp;
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车架号：">
                <span>{{ carDetails.vin }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售申请单号：">
                <span>{{ carDetails.carInApplyId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出口申请单号：">
                <span>{{ carDetails.carOutApplyId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="sellerDeliveryList">
              <el-form-item label="订单号：">
                <span>{{ sellerDeliveryList.orderId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="sellerCarOutApply">
              <el-form-item label="出口国家：">
                <span>{{ sellerCarOutApply.endHarborCountry }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="sellerCarOutApply">
              <el-form-item label="目的港：">
                <span>{{ sellerCarOutApply.endHarborName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </c-main-template>
      <c-main-template title="出口手续信息" minHeight="auto" class="mt-lg">
        <div class="mt-lg">
          <el-row :gutter="24">
            <el-col
              :span="8"
              v-for="(item, index) in carFilesList"
              :key="index"
            >
              <el-form-item
                :label="`${getStatusLabel(exportFormalitiesType, item.type)}：`"
              >
                <span
                  class="c-blue pointer"
                  @click="onFileOpen(item.fileUrl)"
                  >查看</span
                >
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </c-main-template>
      <c-main-template
        title="出口信息"
        minHeight="auto"
        class="mt-lg"
        v-if="transport"
      >
        <div class="mt-lg">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="海运提单号：">
                <span>{{ transport.seaBillNo }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="船名/航次：">
                <span>{{ transport.shipName }}/</span>
                <span>{{ transport.shipNo }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预计到港日：">
                <span>{{
                  filters.dateYMDFormat(transport.estimateArrivalDate)
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出口日期：">
                <span>{{
                  filters.dateYMDFormat(transport.exportDate)
                }}</span>
              </el-form-item>
            </el-col>
               <el-col
                :span="8"
                v-for="(item, index) in getExportFiles(
                  transportFiles,
                  transport.carOutApplyId,
                  [1]
                )"
                :key="index"
              >
                <el-form-item :label="`${item.label}：`">
                  <span class="pointer c-blue" @click="onFileOpen(item.list)"
                    >查看</span
                  >
                </el-form-item>
              </el-col>
            <el-col :span="8">
              <el-form-item label="车辆退牌时间：" v-show="sellerCarOutApply.cancelTime">
                <span>{{filters.dateYMDHMSFormat(sellerCarOutApply.cancelTime)}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="pb-lg">
              <c-table-template border :data="transportContainerList">
              <el-table-column align="center" label="集装箱号" prop="no">
              </el-table-column>
              <el-table-column align="left" label="车辆信息">
                <template #default="scope">
                  <div v-for="(item, index) in scope.row.carInfoList" :key="index">
                    {{item}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="车架号" prop="vinList">
                <template #default="scope">
                <div v-for="(item, index) in scope.row.vinList" :key="index">
                    {{item}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="集装箱尺寸">
                <template #default="scope">
                  {{ scope.row.size }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="重量/KG">
                <template #default="scope">
                  {{ scope.row.weight }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="装箱照片">
                <template #default="scope">
                <span
                    class="pointer c-blue"
                    @click="onFileOpen(scope.row.packingPicList)"
                    >查看</span
                  >
                </template>
              </el-table-column>
            </c-table-template>
            </el-col>
          </el-row>
        </div>
      </c-main-template>
      <c-main-template
        title="车辆仓储信息"
        minHeight="auto"
        class="mt-lg"
        v-if="storeCarLogList.length > 0"
      >
        <el-timeline class="mg-lg">
          <el-timeline-item
            type="primary"
            v-for="(item, index) in storeCarLogList"
            :key="index"
            :timestamp="filters.dateYMDHMSFormat(item.timeCreate)"
          >
            <div class="flex-y-center">
              <div>{{ item.storeName }}</div>
              <div class="mr-lg ml-lg">{{getStatusLabel(warehouseType,item.type)}}</div>
            </div>
            <div v-if="item.storeCarFilesList && item.storeCarFilesList.length>0"
              class="flex-warp mt-sm">
              <div @click="onFileOpen(d.fileUrl)" class="warehouse-car mr-lg pointer" v-for="(d,j) in item.storeCarFilesList" :key="j">
                <img :src="d.fileUrl"/>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </c-main-template>
    </el-form>
  </div>
</template>
<script setup>
const k = ["brand", "series", "model"];
import { ref, onMounted, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import {
  exportFormalitiesType,
  exportFileType,
  warehouseType,
  getStatusLabel,
} from "@/utils/status.js";
import {onFileOpen,getExportFiles} from '@/utils/index.js'
const ruleFormRef = ref();
const ruleForm = ref({});
const rules = ref({});

const carDetails = ref(null);//	车辆详情
const carFilesList = ref([]);//关联的车辆文件列表
const sellerCarOutApply = ref(null); //出口信息详情
const storeCarLogList = ref([]); //车辆仓库信息
const sellerDeliveryList = ref(null); //发货详情
const transport = ref(null); //海运单
const transportContainerList = ref([]); //海运集装箱
const transportFiles = ref([]); //海运单箱单等文件

const loading = ref(false);
const route = useRoute();
const { proxy } = getCurrentInstance();
onMounted(() => {
  getById();
});
const getById = () => {
  const url = "/carList/getById";
  const params = {
    id: route.query.id,
  };
  loading.value = true;
  proxy.$get({ url, params }).then((res) => {
    carFilesList.value = res.carFilesList;
    carDetails.value = res.carList;
    sellerCarOutApply.value = res.sellerCarOutApply;
    storeCarLogList.value = res.storeCarLogList;
    sellerDeliveryList.value = res.sellerDeliveryList;
    transport.value = res.transportList;
    transportContainerList.value = res.transportContainerList;
    transportFiles.value = res.transportFiles;
    loading.value = false;
  });
};
</script>
<style lang="less" scoped>
.warehouse-car {
  width: 100px;
  height: 100px;
}
</style>